/**
 * Created by admin on 2018/10/26.
 */

/**
 * Created by admin on 2018/10/8.
 */
//左侧菜单的active状态及右边版块的切换
$(function(){
    //   将图片和下面的文字用对象存起来
    var productData = [
        [{"image" :"li11.png"  ,"text" : "齿轮零件"},
            {"image" :"li12.png"  ,"text" : "机器零部件"},
            {"image" :"li13.png"  ,"text" : "机器零件"},
            {"image" :"li14.png"  ,"text" : "射灯零部件"},
            {"image" :"li15.png"  ,"text" : "无人机支架"},
            {"image" :"li16.png"  ,"text" : "轴承零件"}],


        [{"image" :"li21.png"  ,"text" : "耳坠模型"},
            {"image" :"li22.png"  ,"text" : "耳坠模型2"},
            {"image" :"li23.png"  ,"text" : "耳坠模型3"},
            {"image" :"li24.png"  ,"text" : "耳坠模型4"},
            {"image" :"li25.png"  ,"text" : "耳坠模型5"},
            {"image" :"li26.png"  ,"text" : "头饰花环"}],

        [{"image" :"li31.png"  ,"text" : "茶杯垫"},
            {"image" :"li32.png"  ,"text" : "果盘模型"},
            {"image" :"li33.png"  ,"text" : "火柴人鸡蛋架"},
            {"image" :"li34.png"  ,"text" : "码表架"},
            {"image" :"li35.png"  ,"text" : "桶盖"},
            {"image" :"li36.png"  ,"text" : "蛙腿鸡蛋架"}],

        [{"image" :"li41.png"  ,"text" : "电饭锅"},
            {"image" :"li42.png"  ,"text" : "滚筒洗衣机"},
            {"image" :"li43.png"  ,"text" : "烧水壶"},
            {"image" :"li44.png"  ,"text" : "桶盖"}],

        [{"image" :"li51.png"  ,"text" : "麒麟"},
            {"image" :"li52.png"  ,"text" : "狮子头"}],


        [{"image" :"li61.png"  ,"text" : "怪物头"},
            {"image" :"li62.png"  ,"text" : "小海马模型"},
            {"image" :"li63.png"  ,"text" : "蜘蛛模型"}],

        [{"image" :"li71.png"  ,"text" : "脊椎骨模型"},
            {"image" :"li72.png"  ,"text" : "人体骨骼模型"}],

        [{"image" :"li81.png"  ,"text" : "党徽标志奖杯"},
            {"image" :"li82.png"  ,"text" : "赛事奖杯"},
            {"image" :"li83.png"  ,"text" : "心形奖杯"}],

        [{"image" :"li91.png"  ,"text" : "鼓刹零件模型"},
            {"image" :"li92.png"  ,"text" : "零件"},
            {"image" :"li93.png"  ,"text" : "零件2"}],

        [{"image" :"li111.png"  ,"text" : "插画支架"},
            {"image" :"li112.png"  ,"text" : "创意花盆"},
            {"image" :"li113.png"  ,"text" : "灯具"},
            {"image" :"li114.png"  ,"text" : "观云灯"},
            {"image" :"li115.png"  ,"text" : "鸟巢"},
            {"image" :"li116.png"  ,"text" : "桶盖"}],

        [{"image" :"li121.png"  ,"text" : "1100模型"},
            {"image" :"li122.png"  ,"text" : "埃菲尔铁塔"},
            {"image" :"li123.png"  ,"text" : "建筑模型"},
            {"image" :"li124.png"  ,"text" : "现代化建筑模型"}],

        [{"image" :"li131.png"  ,"text" : "个性字母小批量"},
            {"image" :"li132.png"  ,"text" : "码表架"},
            {"image" :"li133.png"  ,"text" : "枪把模型"},
            {"image" :"li134.png"  ,"text" : "小批量"},
            {"image" :"li135.png"  ,"text" : "眼镜支架"}]

    ];
    //初始让带第一个条数据展示出来
    //print(productData[0]);
    //$(".content-left ul li").each(function(){
    //    $(this).click(function(){
    //        var  index = $(this).index();
    //        //清空前面的数据
    //        $(".content-img").empty();
    //        print(productData[index]);
    //        $(this).addClass('active').siblings("li").removeClass('active');

    function bindLaypage(htmlId,data){
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            laypage.render({
                elem : htmlId,
                theme: '#f0d021; ',
                // first:'首页',
                //last:'尾页',
                prev:'上一页',
                next:'下一页',
                limit: 6,
                //  curr:location.hash.replace('#!fenye=','.p-header'),
                // hash:'fenye',
                count : data.length,
                jump: function(obj){
                    //清空当前数据
                    $(".content-img").empty();
                    var arr = [] ;
                    for(var i =(obj.curr-1)*obj.limit ;i < obj.curr * obj.limit && i< data.length ; i++){
                        arr.push(data[i]);
                    }
                    //展示li
                    print(arr);
                    //分页跳转后的锚点定位

                }
            })
        })
    }

    //初始让第一条数据展示出来
    bindLaypage('page',productData[0]);

    $(".content-left ul li").each(function() {
        $(this).click(function () {
            var index = $(this).index();
            //清空前面的数据
            //$(".content-img").empty();
            //  print(productData[index]);
            bindLaypage('page',productData[index]);
            $(this).addClass('active').siblings("li").removeClass('active');
        });
    });

//遍历得到产品图
    function print(subData){
        //   console.log(subData)
        for(var j=0 ;j<subData.length ; j++){
            //console.log(subData.text);
            var showProductions = $(".content-img");
            showProductions.append(' <div class="img-border">'+
            '<img src="../static/image/sls/'+ subData[j].image +'" alt=""/>'+
            '<p>'+ subData[j].text + '</p>'+
            ' </div>');

        }

    }




});